<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-sclae=1.0,user-scalable=0">
	<title>xuluo</title>
	<script type="text/javascript" src="../../js/zepto.min.js"></script>
	<style type="text/css">
		*{margin:0;padding:0;font-family:'microsoft yahei',SimSun}
		li,ul{list-style:none}
		a{text-decoration:none;outline:0;color:inherit}
		img{border:none;vertical-align:middle}
		button,input,select,textarea{outline:0;border:none;color:inherit;font-size:inherit}
		.btn{display:inline-block;padding:0 22px;height:35px;line-height:35px;background:#009688;color:#fff;font-size:15px;cursor:pointer;vertical-align:middle;border-radius:2px}
		.btn:hover{opacity:1;filter:alpha(opacity=100)}
		.btn:active{opacity:.9;filter:alpha(opacity=90)}
	</style>
</head>
<body>
	<div class="wrap" style="margin: 20px auto;display: table;text-align: center;color: #666;">
		<input type='file' id="imgFile" style="width: 150px;font-size: 14px;">
		<input type="button" value="压缩上传" class="btn" id="upload">
		<img src="" id="newImg" style="display: none;width: 50%;max-width: 300px;margin: 20px auto;">
	</div>
	<script type="text/javascript" src="js/file-scale.js"></script>
	<script>
		var upload='';
		new FileInput({
			container: '#imgFile',
			isMulti: false,
			type: 'Image_Camera',
			success: function(b64, file, detail) {
				console.log("fileName:" + file.name+"filesize:"+file.size);
				var filetype=file.name.split('.').pop();
				var img = new Image();
				img.src = b64;
				img.onload = function() {
					// 压缩
					function processImg(img, args) {
						if (!img) {
							alert('请选择原图');
							return;
						}
						var newBase64 = ImageScale.compressImage(img, args);
						var newImg = new Image();
						newImg.src = newBase64;
						newImg.onload = function() {
							$('#newImg').show();
							$('#newImg').attr('src',newBase64);
							// 点击上传按钮再上传
							upload=function(){
								$.ajax(
									{
										url: 'upload.php', 
										type: 'post',
										data:{
										message:newBase64,
										filetype:filetype
									},success:function (resp){
										if(resp.code == 1){
											alert('上传失败');
										}else if(resp.code == 0){
											alert('上传成功：./upload/'+resp.con);
										}
									},
									error:function(resp){
										console.log(resp);
									}
								})
							};
						};
					}
					processImg(this, {
						// 压缩质量
						quality:0.7,
						mime:'image/jpeg',
						// 压缩时的放大系数，默认为1，如果增大，代表图像的尺寸会变大(最大不会超过原图)
						compressScaleRatio:1,
						// ios的iPhone下主动放大一定系数以解决分辨率过小的模糊问题
						iphoneFixedRatio:1.5,
						// 是否采用原图像素（不会改变大小）
						isUseOriginSize:false,
						// 增加最大宽度，增加后最大不会超过这个宽度
						maxWidth:720,
						// 使用强制的宽度，如果使用，其它宽高比系数都会失效，默认整图使用这个宽度
						forceWidth:0,
						// 同上，但是一般不建议设置，因为很可能会改变宽高比导致拉升，特殊场景下使用
						forceHeight:0,
					});
				};
			},
			error: function(error) {
			console.error(error);
			}
		});
		$('#upload').click(function(){
			upload();
		});
	</script>
</body>
</html>